<template>
  <div class="floatNav" :style="{right: menuFlag ? menuRight+'px' : '0', top: menuTop}" ref="navbox" v-if="hidFlag">
    <div class="btn-change" @click="menuFlag = !menuFlag" :title="menuFlag ? '点击展开菜单' : '点击收缩菜单' ">
      <a-icon :type="menuFlag ? 'double-left' : 'double-right'" />
    </div>
    <a-affix :offsetTop="0" class="slot-box">
      <slot></slot>     
    </a-affix>
  </div>
</template>

<script>
export default {
  name: "fixed-menu",
  props: {
    menuRight: {
      type: String,
      default: '-82'
    },
    menuTop: {
      type: String,
      default: '18vh'
    },
    menuClass: {
      type: String,
      default: ''
    }
  },    
  data() {
    return {
      menuFlag: false,
      hidFlag: true,
    };
  },
  mounted(){
    let height = 0
    if(this.$refs.navbox){
      height = this.$refs.navbox.offsetHeight
      if(this.$refs.navbox.querySelector('ul')){
        height = this.$refs.navbox.querySelector('ul').offsetHeight
      }
      if(this.menuClass && this.$refs.navbox.querySelector('.'+this.menuClass)){
        height = this.$refs.navbox.querySelector('.'+this.menuClass).offsetHeight
      }    
    }
    this.hidFlag = height < 35 ? false : true
  }
}
</script>
<style lang="less" scoped>
.floatNav {
  >div{border-bottom: 1px solid #f5f5f5;display: flex;border: 1px solid #e2e2e2;background-color: #fff;
    flex-direction: column;align-items: center;   
  }
  .btn-change{display: none;}  
}
@media only screen and (max-width: 1080px) { 
    .floatNav{position: fixed;display: flex;align-items: center;
      transition: right .4s ease-in-out; will-change: right;z-index: 11;
        .btn-change{display: inline-block;padding: 20px 0;cursor: pointer; 
        background-color: #ABB6C0;border-bottom-left-radius: 10px;border-top-left-radius: 10px;position: relative;right:-1px;z-index:2;
          i{color: #fff;}
          &:hover{background-color: #b9c2ca;}
        }
        >div:last-of-type{box-shadow: -1px 4px 12px #ccc;}        
        /deep/ .slot-box *{position: inherit;margin: 0;}
    }
}
</style>
